<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据应用-数据源-时间线</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="timeline">
    <div class="time-item-create">
        <i class="fa fa-user-o bg-cyan"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                <span class="badge {{data1}}">{{data2}}</span> {{body}}
            </div>
        </div>
    </div>
    <div class="time-item-init">
        <i class="fa fa-cubes bg-success"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                {{body}}
            </div>
            <div class="timeline-footer">
                <button id="btn-{{uuid}}" class="btn btn-sm btn-outline-info download" data-id="{{data1}}">
                    <i class="fa fa-download"></i> 下载
                </button>
            </div>
        </div>
    </div>
    <div class="time-item-backup">
        <i class="fa fa-copy bg-info"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                <span class="badge {{data2}}">{{data3}}</span> {{body}}
            </div>
            <div class="timeline-footer">
                <button id="btn-{{uuid}}" class="btn btn-sm btn-outline-info download" data-id="{{data1}}">
                    <i class="fa fa-download"></i> 下载
                </button>
            </div>
        </div>
    </div>
    <div class="time-item-recovery">
        <i class="fa fa-paste bg-danger"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                <span class="badge {{data2}}">{{data3}}</span> {{body}} <br/>
                备份文件来源: <span class="badge bg-info">#{{relateNum1}}</span>
            </div>
            <div class="timeline-footer">
                <button id="btn-{{uuid}}" class="btn btn-sm btn-outline-info download" data-id="{{data1}}">
                    <i class="fa fa-download"></i> 下载
                </button>
            </div>
        </div>
    </div>
    <div class="time-item-upgrade">
        <i class="fa fa-arrow-up bg-warning"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-user-o"></i> {{user}} <i class="fa fa-clock-o"></i> {{time}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{caption}}</b> <span class="badge {{resultClass}}">{{resultValue}}</span>
            </h3>
            <div class="timeline-body" id="timeline-body-{{uuid}}">
                {{body}}
                <textarea id="textarea-{{uuid}}">{{data1}}</textarea>
            </div>
            <div class="timeline-footer">
                <button id="btn-{{uuid}}" class="btn btn-sm btn-outline-info copy" data-data1="{{data1}}">
                    <i class="fa fa-copy"></i> 复制
                </button>
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
<script src="../../plugins/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../plugins/clipboard/clipboard.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var templateCreate = $(".time-item-create").html();
    var templateInit = $(".time-item-init").html();
    var templateBackup = $(".time-item-backup").html();
    var templateRecovery = $(".time-item-recovery").html();
    var templateUpgrade = $(".time-item-upgrade").html();

    var templateDate = "<div class=\"time-label time-group\"><span class=\"bg-navy\">{{data}}</span></div>";
    var templateStart = "<div><i class=\"fa fa-clock-o bg-primary\"></i></div>";

    $(".timeline").empty();

    var params = Utils.getParams(location.href);
    var dataSourceId = params["id"];

    $.ajax({
        url: Url.dataService.dataSourceTimeline.replace("{id}", dataSourceId),
        type: HttpMethod.get,
        success: function (result, status, xhr) {
            $(".timeline").empty();

            for (var i = result.length - 1; i >= 0; i--) {
                var date = result[i];
                $(".timeline").append(templateDate.replace(new RegExp("{{data}}", "gm"), date.date));
                for (var j = date.items.length - 1; j >= 0; j--) {
                    var uuid = Math.random().toString(36).slice(-8);
                    var time = date.items[j];
                    if (time.type === "CREATE") {
                        time.data1 = time.data1 === "MYSQL" ? "bg-info" : "bg-warning";
                    } else if (time.type === "BACKUP") {
                        switch (time.data2) {
                            case "SCHEDULE": time.data2 = "bg-success"; break;
                            case "MANUAL": time.data2 = "bg-primary"; break;
                            case "INIT": time.data2 = "bg-warning"; break;
                            case "UPGRADE": time.data2 = "bg-danger"; break;
                            default: time.data2 = "bg-light"; break;
                        }
                    } else if (time.type === "RECOVERY") {
                        switch (time.data2) {
                            case "MANUAL": time.data2 = "bg-primary"; break;
                            case "INIT": time.data2 = "bg-warning"; break;
                            case "UPGRADE": time.data2 = "bg-danger"; break;
                            default: time.data2 = "bg-light"; break;
                        }
                    }
                    var template;
                    if (time.type === "CREATE") {
                        template = templateCreate;
                    } else if (time.type === "INIT") {
                        template = templateInit;
                    } else if (time.type === "BACKUP") {
                        template = templateBackup;
                    } else if (time.type === "RECOVERY") {
                        template = templateRecovery;
                    } else if (time.type === "UPGRADE") {
                        template = templateUpgrade;
                    }
                    template = "<div>" + template + "</div>";
                    $(".timeline").append(template
                        .replace(new RegExp("{{num}}", "gm"), time.num)
                        .replace(new RegExp("{{caption}}", "gm"), time.typeValue)
                        .replace(new RegExp("{{time}}", "gm"), time.time)
                        .replace(new RegExp("{{user}}", "gm"), time.user)
                        .replace(new RegExp("{{body}}", "gm"), time.content)
                        .replace(new RegExp("{{resultClass}}", "gm"), time.result ? "bg-success" : "bg-danger")
                        .replace(new RegExp("{{resultValue}}", "gm"), time.result ? "成功" : "失败")
                        .replace(new RegExp("{{relateNum1}}", "gm"), time.relateNum1)
                        .replace(new RegExp("{{relateNum2}}", "gm"), time.relateNum2)
                        .replace(new RegExp("{{relateNum3}}", "gm"), time.relateNum3)
                        .replace(new RegExp("{{data1}}", "gm"), time.data1)
                        .replace(new RegExp("{{data2}}", "gm"), time.data2)
                        .replace(new RegExp("{{data3}}", "gm"), time.data3)
                        .replace(new RegExp("{{data4}}", "gm"), time.data4)
                        .replace(new RegExp("{{data5}}", "gm"), time.data5)
                        .replace(new RegExp("{{uuid}}", "gm"), uuid)
                    );
                    var $body = $("#timeline-body-" + uuid);
                    if (time.type === "UPGRADE") {
                        var codeMirror = CodeMirror.fromTextArea(document.getElementById("textarea-" + uuid), {
                            mode: "text/x-sql",
                            theme: "darcula"
                        });
                        codeMirror.setSize("auto", "100px");

                        // 绑定复制按钮
                        new ClipboardJS("#btn-" + uuid, {
                            text: function(trigger) {
                                return $("#" + trigger.id).attr("data-data1");
                            }
                        }).on('success', function(e) {
                            parent.window.frameCtrl.toastr.success("复制成功");
                        }).on('error', function(e) {
                            parent.window.frameCtrl.toastr.error("复制失败");
                        });

                        if (!time.result) {
                            $body.append("<b>异常信息：</b><code class=\"text-danger\">" + time.data2 + "</code> ");
                        }
                    } else if (time.type === "INIT") {
                        $("#btn-" + uuid).click(function () {
                            var id = $(this).attr("data-id");
                            window.open(Url.fileDownload.replace("{uuid}", id), "_blank");
                        });

                        if (!time.result) {
                            $body.append("<b>异常信息：</b><code class=\"text-danger\">" + time.data4 + "</code> ");
                        }
                    } else if (time.type === "BACKUP" || time.type === "RECOVERY") {
                        $("#btn-" + uuid).click(function () {
                            var id = $(this).attr("data-id");
                            window.open(Url.dataService.dataBackupHistoryDownload.replace("{id}", id), "_blank");
                        });

                        if (!time.result) {
                            $body.append("<b>异常信息：</b><code class=\"text-danger\">" + time.data4 + "</code> ");
                        }
                    }
                }
            }
            $(".timeline").append(templateStart);
        },
        beforeSend: function (xhr) {
            $(".timeline").html("<div style='text-indent: 2em'></div>");
        },
    });
</script>
</body>
</html>